<template>
  <div class="look">
    <div class="title border-bottom">看了该景点的人还看了</div>
    <div class="look-list">
      <ul>
        <li class="border-bottom">
          <div class="list-img">
            <img
              src="http://img1.qunarzz.com/sight/p0/2203/62/62bb1f47f6146658a3.water.jpg_228x168_416866ec.jpg"
            />
          </div>
          <div class="list">
            <div class="list-name">
              <span class="name">世界之窗</span>
              <span class="level">(5A)</span>
            </div>

            <div class="list-money">
              <span class="price-symbol">￥</span>
              <span class="price">122</span>起
            </div>
            <div class="list-level">
              <span class="score">五颗星</span>
              <span class="comments">77888条评论</span>
            </div>

            <div class="list-location">深圳·华侨城</div>
          </div>
        </li>
        <li>
          <div class="list-img">
            <img
              src="http://img1.qunarzz.com/sight/p0/2203/62/62bb1f47f6146658a3.water.jpg_228x168_416866ec.jpg"
            />
          </div>
          <div class="list">
            <div class="list-name">
              <span class="name">世界之窗</span>
              <span class="level">(5A)</span>
            </div>

            <div class="list-money">
              <span class="price-symbol">￥</span>
              <span class="price">122</span>起
            </div>
            <div class="list-level">
              <span class="score">五颗星</span>
              <span class="comments">77888条评论</span>
            </div>

            <div class="list-location">深圳·华侨城</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailLook",
};
</script>

<style lang="stylus" scoped>
.look {
  background: #fff;
  margin-top: 0.2rem;
  padding: 0.2rem 0.2rem 0 0.2rem;
}

.title {
  font-size: 0.3rem;
  padding-bottom: 0.2rem;
}

.list-img {
  float: left;
}

.list {
  padding-left: 1.9rem;
}
.look-list ul li {
  height: 1.62rem
  padding: .2rem 0
}

.list-name {
  float: left;
}

.list-img img {
  width: 1.62rem;
  height: 1.62rem;
}

.name {
  font-size: 0.3rem;
}

.level {
  font-size: 0.3rem;
  color: #9e9e9e;
}

.list-money {
  text-align: right;
  font-size: 0.08rem;
}

.price-symbol {
  color: #ff9800;
}

.price {
  font-size: 0.4rem;
  color: #ff9800;
}
.list-level {
  margin-top: .4rem
}
.list-level .comments{
  color: #9e9e9e;

}
.list-location {
  color: #9e9e9e;
  margin-top: .2rem
}
</style>